<script setup>
import {onMounted} from 'vue';
import {useRoute} from 'vue-router';

const route = useRoute();

onMounted(() => {
    console.log("route",route);
    // 接值：
    console.log("route.params.id",route.params.id);
})

</script>

<template>
    <h1>音乐详情</h1>
    <p>route.params.id ：{{route.params.id}}</p>

</template>

<style  scoped>
    
</style>
<!-- 

// 进入组件前：（此处组件还没有创建，所以，没有this）
beforeRouteEnter(){
    console.log("lifecycle_parentSon父组件：beforeRouteEnter，没有this",this)
},
// 当地址栏发生变化，但是组件被复用时。
beforeRouteUpdate(to, from, next) {
    console.log("lifecycle_parentSon父组件：beforeRouteUpdate")
    next()
},
beforeRouteLeave(to, from, next) {
    console.log("lifecycle_parentSon父组件：beforeRouteLeave")
    next()
}, -->